
<template>
  <el-row type="flex" justify="space-between" class="tree_control" align="middle">
    <!-- 左侧内容 -->
    <el-col>{{ treeData.name }}</el-col>
    <!-- 右侧内容 -->
    <el-col :span="4">
      <el-row type="flex" class="row-bg" justify="end">
        <el-col class="respons">{{ treeData.manager }}</el-col>
        <el-col class="options">
          <el-dropdown placement="bottom-start" @command="handleDepartments">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add" :disabled="!checkPermission('add-dept')">添加子部门</el-dropdown-item>
              <!-- <el-dropdown-item v-if="!isRoot">编辑部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot">删除部门</el-dropdown-item> -->
              <template v-if="!isRoot">
                <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                <el-dropdown-item command="del">删除部门</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
// 导入删除部分信息的接口方法
import { delDepartments } from '@/api/departments.js';
export default {
  props: {
    treeData: {
      required: true,
      type: Object,
    },
    isRoot: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {

    };
  },
  methods: {
    handleDepartments(type) {
      if (type === 'add') {
      // 执行添加部分操作
        this.$emit('showAddDepartsDialog', this.treeData);
      } else if (type === 'edit') {
        // 执行编辑部分操作
        this.$emit('showEditDepartsDialog', this.treeData);
      } else {
        // 执行删除部分操作
        this.$confirm('此操作将永久删除该部分, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          // 在这里发起删除部分数据的请求
          // console.log(this.treeData.id);
          // delDepartments(this.treeData.id).then(() => {
          //   this.$message({
          //     type: 'success',
          //     message: '删除成功!',
          //   });
          // },
          // );
          return delDepartments(this.treeData.id);
        }).then(() => {
          // 在这里通知父组件更新视图
          this.$emit('delDepts');
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            });
          });
      }
    },
  },
};
</script>

<style scoped>
.options {
  margin-left: 15px;
}
</style>
